<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <title>Lumino - free Bootstrap 4.0 theme</title>
    <!-- load stylesheets -->
    <link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css"/>                <!-- Font Awesome -->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>                                      <!-- Bootstrap style -->
    <link rel="stylesheet" href="css/magnific-popup.css"/>                                     <!-- Magnific pop up style -->
    <link rel="stylesheet" href="css/templatemo-style.css"/>                                   <!-- Templatemo style -->
	<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
	<script src="js/common.js"></script>
</head>

    <body id="top" class="home">
       
        <div class="container-fluid">
            <div class="row">
              
                <div class="tm-navbar-container">
                
                <!-- navbar   -->
                <nav class="navbar navbar-full navbar-fixed-top">

                    <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
                        &#9776;
                    </button>
                        
                    <div class="collapse navbar-toggleable-sm" id="tmNavbar">                            

                        <ul class="nav navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#top">Intro</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#tm-section-2">News</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#tm-section-3">Gallery</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#tm-section-4">Contact</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link external" href="columns.html">Columns</a>
                            </li>
                        </ul>

                    </div>
                  
                </nav>

              </div>  

           </div>

           <div class="row">
                <div class="tm-intro">

                    <section id="tm-section-1">                        
                        <div class="tm-container text-xs-center tm-section-1-inner">
                            <img src="img/tm-lumino-logo.png" alt="Logo" class="tm-logo" />
                            <h1 class="tm-site-name">Lumino</h1>
                            <p class="tm-intro-text">Free Bootstrap 4.0 Website Template</p>
                            <a href="#tm-section-2" class="tm-intro-link">Begin</a>    
                        </div>                                               
                   </section>

                </div>
            </div>

            <div class="row gray-bg">
                
                <div id="tm-section-2" class="tm-section">
                    <div class="tm-container tm-container-wide" id="blogs">
						<blog-item v-for="(item,index) in blogs" v-bind:blog="item" v-bind:index="index"></blog-item>
                    </div>                    
               </div>

           </div> <!-- row -->
           <div class="copyrights">Collect from <a href="http://www.cssmoban.com/"  title="网站模板">网站模板</a></div>

            <div class="row">

                <section id="tm-section-3" class="tm-section">
                    <div class="tm-container text-xs-center">
                        
                        <h2 class="blue-text tm-title">Lorem ipsum dolor sit amet</h2>
                        <p class="margin-b-5">Etiam at rhoncus nisl. Nunc rutrum ac ante euismod cursus.</p>
                        <p>Suspendisse imperdiet feugiat massa nex iaculis.</p>
                       
                        <div class="tm-img-grid" id="myPhotoApp">
                        	<blog-photo v-for="(item,psize) in photos" v-bind:photo="item" size="12"></blog-photo>
                        </div>
                    </div>
                </section>

            </div> <!-- row -->

            <div class="row gray-bg">

                <section id="tm-section-4" class="tm-section">
                    <div class="tm-container">

                        <h2 class="blue-text tm-title text-xs-center">Contact Us</h2>
                      
                        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
                            <form action="index.html" method="post" class="tm-contact-form">                                
                                <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 tm-form-group-left">
                                    <input type="text" id="contact_name" name="contact_name" class="form-control" placeholder="Name"  required="required"/>
                                </div>
                                <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 tm-form-group-right">
                                    <input type="email" id="contact_email" name="contact_email" class="form-control" placeholder="Email"  required="required"/>
                                </div>
                                <div class="form-group">
                                    <input type="text" id="contact_subject" name="contact_subject" class="form-control" placeholder="Subject"  required="required"/>
                                </div>
                                <div class="form-group">
                                    <textarea id="contact_message" name="contact_message" class="form-control" rows="6" placeholder="Message" required="required"></textarea>
                                </div>
                            
                                <button type="submit" class="btn tm-light-blue-bordered-btn pull-xs-right">Submit</button>                          
                            </form>   
                        </div> <!-- col -->
                        
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 margin-top-xs-50">
                            <h3 class="light-blue-text tm-subtitle">Etiam at rhoncus nisl</h3>
                            <p>Nunc rutrum ac ante euismod cursus. Suspendisse imperdiet feugiat massa nec iaculis</p>
                            <p>
                                Tel: <a href="tel:0100200340">010-020-0340</a><br/>
                                Email: <a href="mailto:info@company.com">info@company.com</a>
                            </p>
                        </div>
                    </div>                    
                </section>

                <!-- footer -->
                <footer class="tm-footer">                
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                        <p class="text-xs-center tm-footer-text">Copyright &copy; 2016 Company Name.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>                    
                    </div>                
                </footer>  

            </div> <!-- row -->
           
        </div> <!-- container-fluid -->
        
        <!-- load JS files -->
        
        <script src="js/jquery-1.11.3.min.js"></script>             <!-- jQuery (https://jquery.com/download/) -->
        <script src="js/tether.min.js"></script> <!-- Tether for Bootstrap, http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h --> 
        <script src="js/bootstrap.min.js"></script>                 <!-- Bootstrap (http://v4-alpha.getbootstrap.com/) -->
        <script src="js/jquery.singlePageNav.min.js"></script>      <!-- Single Page Nav (https://github.com/ChrisWojcik/single-page-nav) -->
        <script src="js/jquery.magnific-popup.min.js"></script>     <!-- Magnific pop-up (http://dimsemenov.com/plugins/magnific-popup/) -->
        <script src="js/model/blog-item.js"></script>
        <script src="js/model/blog-photo.js"></script>                

</body>
</html>